<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="/resources/css/weui.min.css"/>
    <link rel="stylesheet" href="/resources/css/myweui.css"/>
    <title>Hello world</title>
    <script type="text/javascript" src="/resources/js/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('App', []);

        app.directive('whenScrolled', function() {
            return function(scope, element, attr) {
                var raw = element[0];
                element.bind('scroll', function() {
                    if (raw.scrollTop+raw.offsetHeight >= raw.scrollHeight) {
                        scope.$apply(attr.whenScrolled);
                    }
                });
            };
        });

        app.controller('Controller', function ($scope,$http)
        {
            $scope.currentPage = 1;
            $scope.pages = 10;
            $scope.myList = [];

            $scope.loadMore = function() {
                var paramsBody = {};
                paramsBody.random = Math.random();
                paramsBody.body = {};
                paramsBody.page = {'pageNo':$scope.currentPage+1,'pageSize':'10'};

                if ($scope.currentPage < $scope.pages) {
                    if ($scope.busy) {
                        return false;
                    }
                    $scope.busy = true;
                    $http.post('/ajax/pageTest',paramsBody).success(function(data){
                        $scope.busy = false;
                        for (var i in data.data) {
                            $scope.myList.push(data.data[i]);
                        }
                        $scope.currentPage++;
                    });
                }
            };
        });

    </script>

    <style type="text/css">
        .list-item {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        .list-item ul{
            position:relative;
            list-style:none;
            padding:0;
            margin:0;
            width:100%;
            text-align:left;
        }

        .list-item ul li{
            padding:0 10px;
            height:80px;
            line-height:60px;
            border-bottom:1px solid #ccc;
            border-top:1px solid #fff;
            background-color:#fafafa;
            font-size:14px;
        }
    </style>
</head>
<body>
<div ng-app='App'>
    <div ng-controller='Controller'>

        <div class="list-item" when-scrolled="loadMore()">
            <ul>
                <li>Pretty row 1</li>
                <li>Pretty row 2</li>
                <li>Pretty row 3</li>
                <li>Pretty row 4</li>
                <li>Pretty row 5</li>
                <li>Pretty row 6</li>
                <li>Pretty row 7</li>
                <li>Pretty row 8</li>
                <li>Pretty row 9</li>
                <li>Pretty row 10</li>
            </ul>
            <ul ng-repeat='my in myList'>
                <li>Pretty row {{my}}</li>
            </ul>
        </div>
    </div>


</div>
<div id="footer"></div>
</body>
</html>
      